<script>
import { addressListFn, addressDefaultIdFn, setDefaultFn, addressremoveFn } from '@/api/address'
export default {
  data() {
    return {
      addressList: [],
      defaultId: '',//默认地址id
    }
  },
  methods: {
    init() {
      addressListFn().then(res => {
        console.log(res);
        const { list } = res.data
        list.map(item => {
          item.isSelected = false
        })
        // console.log(this.defaultId, 222222222, this.addressList);
        if (this.defaultId) {
          let xuanze = list.find(item => {
            console.log(item.address_id, 33333333);

            return item.address_id === this.defaultId
            // console.log(item.address_id);

          })
          // console.log(xuanze);
          if (xuanze) {
            xuanze.isSelected = true

          }

        }


        this.addressList = list
        // console.log(this.addressList);


      })
    },
    xuanze(id) {
      // console.log(id);
      this.addressList.map(item => item.isSelected = false)

      const xuanze = this.addressList.find(item => {
        return item.address_id === id
        // console.log(item.address_id);

      })
      // console.log(xuanze);

      xuanze.isSelected = true

      setDefaultFn(id).then(res => {
        // console.log(res);
        let baseUrl = this.$route.query.backUrl
        if (baseUrl) {
          baseUrl = baseUrl.slice(1, 4)
          // console.log(baseUrl, 11);
          if (baseUrl === 'pay') {
            this.$router.go(-1)
          }
        }


        // if ()

      })

    },
    deleteFn(id) {
      // 删除
      showConfirmDialog({
        title: '提示',
        message:
          '您确定要删除当前收货地址吗？',
        // 'cancel-button-text': '再逛逛',
        // 'confirm-button-text': '去登录',
        'confirm-button-color': '#f66',

      })
        .then(() => {

          addressremoveFn(id).then(res => {
            // console.log(res);
            this.init()

          })


        })
        .catch(() => {

          // on cancel
        });
    }
  },
  mounted() {
    addressDefaultIdFn().then(res => {
      // console.log(res);
      const { defaultId } = res.data
      this.defaultId = defaultId
      // console.log(this.defaultId, 11111111);
      this.init()


    })
    // console.log(this.$refs.wbd, 1111111111);

    // this.$refs.wbd





  },

};
</script>

<template>
  <div class="address">
    <!-- {{ addressList }} -->
    <van-nav-bar fixed title="收货地址" left-arrow @click-left="$router.go(-1)" />

    <div class="info" v-for="item in addressList">
      <div class="info-content">
        <span class="name">{{ item.name }}</span>
        <span class="mobile">{{ item.phone }}</span>
      </div>
      <div class="info-address">
        {{ item.region.province }} {{ item.region.city }} {{ item.region.region }} {{ item.detail }}
      </div>
      <div class="footer-fixed">
        <div class="all-check">
          <van-checkbox checked-color="#f66" icon-size="18" :model-value="item.isSelected"
            @click="xuanze(item.address_id)">{{
              item.isSelected ? '默认' : '选择' }}</van-checkbox>
        </div>

        <div class="all-total">
          <div class="edit" @click="$router.replace('/edit/' + JSON.stringify(item))">
            <van-icon name="edit" />
            <!-- {{ JSON.stringify(item) }} -->
            <span>编辑</span>
          </div>
          <div class="delete" @click="deleteFn(item.address_id)">
            <van-icon name="delete-o" />
            <span>删除</span>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="inp" @click="$router.replace('/edit/' + JSON.stringify({ add: 'add' }))">添加新地址</div>
    </footer>

  </div>
</template>

<style lang="scss" scoped>
.address {
  padding-top: 46px;
  padding-bottom: 60px;
  background-color: #fafafa;
  height: 100%;

  ::v-deep {
    .van-nav-bar__arrow {
      color: #333;
    }
  }

  .info {
    margin: 10px auto;
    padding: 15px 20px;
    background-color: #fff;
    width: 352px;

    .mobile {
      margin-left: 8px;
      // margin-bottom: 10px;
    }

    .info-address {
      margin-top: 10px;
      margin-bottom: 25px
    }

    .footer-fixed {
      display: flex;
      justify-content: space-between;

      .all-total {
        display: flex;
        justify-content: flex-end;

        .van-icon {
          margin-right: 5px
        }

        .delete {
          margin-left: 12px;
        }
      }
    }
  }

  footer {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0;
    background-color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;

    .inp {
      height: 40px;
      width: 100%;
      background: linear-gradient(90deg, #f66, #fe5c32);
      border-radius: 20px;
      color: #fff;
      text-align: center;
      line-height: 40px;

    }

  }
}
</style>